<template>
	<view class="content">
		<view class='issue'>
			 <textarea v-if="textareaShow" @blur="blur" :value="infoReceive.textareaValue" :placeholder="textareaPlaceholder"/>
			 <view class="issue-btn-box">
			 	<button v-if="submitShow" class="submit-btn" type="primary" @click="doSubmit">{{submitText}}</button>
				<slot name="submit"></slot>
			 </view>
		</view>
		
	</view>
</template>

<script>

	export default {
		props:{
				headPicShow:{ //图片
					type:[String,Boolean],
					default:true,
				},
				headPicValue:{
					type:String,
					default:require('@/static/img/st_pic.png')
				},
				
				headTitleShow:{ //标题
					type:[String,Boolean],
					default:true,
				},
				headTitleValue:{
					type:String,
					default:"评分"
				},
				
				starsShow:{
					type:[String,Boolean],
					default:true,
				},
				starsMax:{ // 星星最大个数
					type:[String,Number],
					default:5,
				},
				starDefault:{ //未选中
					type:String,
					default:require('@/static/img/st_star.png'),
				},
				starActive:{
					type:String,
					default:require('@/static/img/st_star_active.png'),
				},
				score:{  //默认分数
					type:[Number,String],
					default:0
				},
				starsDisabled:{ //是否禁用star
					type:[Boolean],
					default:false
				},
				
				textareaShow:{ // 多行文本显示
					type:[String,Boolean],
					default:true,
				},
				textareaPlaceholder:{
					type:[String],
					default:"宝贝请提交您不满意信息哦，会尽快处理。"
				},
				
				
				submitShow:{ // 发布按钮
					type:[String,Boolean],
					default:true,
				},
				submitText:{
					type:String,
					default:"提交",
				},
				
				infoReceive:{ // 获取值
					type:Object,
					default:function(){
						return {
							textareaValue:""
						}
					}
				}
			},
			data(){
			return{
				itemId:'',
				timer:'',
				myCount:''
			}
		},
		onLoad:function(option){
			console.log("onLoad")
			try{
				this.myCount = uni.getStorageSync("myCount");
			}catch(e){
				console.log("保存个人信息失败");
			}
			this.itemId=option.itemId;
			this.connection();
		},
		computed:{
			formatScore(){
				return this.infoReceive.score
			}
		},
		onUnload() {
			console.log("onHide");
			uni.closeSocket({
			});
			uni.onSocketClose(function (res) {
				console.log('WebSocket 已关闭！');
			});
		},
		methods: {
			connection:function(){
				uni.connectSocket({
					url:'ws://'+global.address+':8081/dissatisfied/'+this.myCount.username
				});
				uni.onSocketOpen(function (res) {
				  console.log('施工队连接成功！');
				});
				uni.onSocketMessage( res => {
				  console.log(res.data);
				  this.caveat = this.caveat + 1;
				});
			},
			send:function(){
				uni.sendSocketMessage({
					data:'客户'+this.myCount.name+'发来投诉意见：'+this.infoReceive.textareaValue+'请尽快处理'
				})
			},
			/**
			 * @name 设置分数
			 */
			setScore(score){
				if(this.starsDisabled!==false)return
				this.infoReceive.score=score
				this.$emit("scoreChange",score)
			},
			
			/**
			 * @name 获取textarea内容
			 */
			
			blur(e){
				this.infoReceive.textareaValue=e.detail.value
			},
			
			/**
			 * @name 提交
			 */
			doSubmit(){
				if(this.infoReceive.textareaValue===""){
					uni.showToast({
						icon:"loading",
						title:"必须填评价",
						duration:500
					})
					return
				}
				else{
					this.send();
					uni.request({
					url:"http://"+global.address+":8081/dissatisfied/satisfied/"+uni.getStorageSync("myCount").username+"/"+this.itemId+"/"+this.infoReceive.textareaValue,
					method:"GET",
					success(res) {
						console.log(res)
						if(res.data===1){
							uni.showToast({
								icon:"loading",
								title:"评价成功",
								duration:500
							})
							setTimeout(function(){
								uni.navigateBack({
									delta:1
								})
							},510)
						}
					}
					})
				}
			}
		},
		created() {
			this.infoReceive.score=this.score
		}
	}
</script>

<style lang='scss'>
	$backgroundC:#f9f9f9;
	$borderColor:#f5f5f5;
	$white:#ffffff;
	$fontSize:28upx;
	
	.issue {
		background-color: $backgroundC;
		
		&-head{
			background-color: $white;
			height: 100upx;
			border-top: 1upx solid $borderColor;
			border-bottom: 1upx solid $borderColor;
			padding: 0 25upx;
			
			&-pic{
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
				vertical-align: middle;
				margin-right: 17upx;
			}
			&-title{
				line-height: 100upx;
				font-size: 30upx;
				vertical-align: middle;
				margin-right: 35upx;
			}
			
			&-star-box{
				display: inline-block;
				
				image{
					width: 32upx;
					height: 32upx;
					vertical-align: middle;
					margin-right: 14upx;
				}
				image.active{
					animation: star_move ease-in 1 1s,star_rotate ease 1.5s infinite 1s;
				}
			}
		}
		textarea{
			width: 100%;
			height: 420upx;
			background-color: $white;
			font-size: $fontSize;
			color: #898989;
			padding: 24upx;
			box-sizing: border-box;
			line-height: 40upx
		}
		&-btn-box{
			padding: 54upx 30upx;
			
			button{
				width: 100%;
				height: 80upx;
				border-radius: 80upx;
				font-size: $fontSize;
				background-color: #3682FF;
				line-height: 80upx
			}
		}
	}
	
	@keyframes star_move{
		from{
			width: 50upx;
			height: 50upx;
			transform: rotate(180deg)
		}
		to{
			width: 32upx;
			height: 32upx;
			transform: rotate(0)
		}
	}
	@keyframes star_rotate{
		0%{
			transform: rotateY(360deg)
		}
		100%{
			transform: rotateY(180deg)
		}
	}
</style>
